<template>
  <div>
    <div class="myTop">
      <el-button type="text" @click="goBack" class="goback">返回上一页</el-button>
    </div>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" style="font-size:12px">
      <el-form-item label="医疗付费方式" label-width="106px" prop="fgCheckoutWay">
        <el-radio-group v-model="form.fgCheckoutWay">
          <el-radio label="F">现金</el-radio>
          <el-radio label="G">支票</el-radio>
          <el-radio label="H">外币</el-radio>
          <el-radio label="I">转账</el-radio>
        </el-radio-group>
        <span class="mytitle">病案首页</span>
      </el-form-item>
      <el-form-item>
        <div class="myjuzhong">
          <el-form-item prop="personNo" label="">
            <label for="" class="myla">
              <span class="myLabe">*</span>
              医疗卡号：
            </label>
            <el-input v-model="form.personNo"></el-input>
          </el-form-item>
          <el-form-item label-width="106px" prop="fgTimes">
            <label for="" class="myla">
              <span class="myLabe">*</span>
              第几次入院：
            </label>
            <el-input v-model="form.fgTimes"></el-input>
          </el-form-item>
          <el-form-item label-width="106px" prop="fgNum">
            <label for="" class="myla">
              <span class="myLabe">*</span>
              病案号：
            </label>
            <el-input v-model="form.fgNum"></el-input>
          </el-form-item>
        </div>
      </el-form-item>
      <div class="myTable">
        <el-form-item>
          <div class="myjuzhong">
            <el-form-item label-width="106px" prop="fgName">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                姓名：
              </label>
              <el-input v-model="form.fgName"></el-input>
            </el-form-item>
            <el-form-item label-width="106px" prop="fgSex">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                性别：
              </label>
              <el-radio-group v-model="form.fgSex" class="mySex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label-width="106px" prop="fgBirthday">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                出生日期：
              </label>
              <!-- <el-input v-model="form.fgBirthday"></el-input> -->
              <el-date-picker v-model="form.fgBirthday" type="date" placeholder="选择日期时间" style="width: 200px"></el-date-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">年龄：</label>
              <el-input v-model="form.fgAge" readonly></el-input>
            </div>
            <el-form-item label-width="106px" prop="fgNationality">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                国籍：
              </label>
              <el-input v-model="form.fgNationality"></el-input>
            </el-form-item>
            <el-form-item label-width="106px" prop="fgBirthplace">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                籍贯：
              </label>
              <el-input v-model="form.fgBirthplace"></el-input>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <el-form-item label-width="106px" prop="fgOccupation">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                职业：
              </label>
              <el-input v-model="form.fgOccupation"></el-input>
            </el-form-item>
            <el-form-item label-width="106px" prop="fgIdNum">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                身份证号码：
              </label>
              <el-input v-model="form.fgIdNum"></el-input>
            </el-form-item>
            <el-form-item label-width="106px" prop="fgMarriage">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                婚姻：
              </label>
              <el-radio-group v-model="form.fgMarriage" class="mySex">
                <el-radio :label="false">未婚</el-radio>
                <el-radio :label="true">已婚</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <el-form-item label-width="106px" prop="fgUnit">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                工作地址：
              </label>
              <el-input v-model="form.fgUnit"></el-input>
            </el-form-item>
            <div>
              <label for="" class="myla">电话：</label>
              <el-input v-model="form.fgPhonenum"></el-input>
            </div>
            <div>
              <label for="" class="myla">工作单位邮编：</label>
              <el-input v-model="form.fgUnitPostalcodet"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <el-form-item label-width="106px" prop="fgAddress">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                户口地址：
              </label>
              <el-input v-model="form.fgAddress"></el-input>
            </el-form-item>
            <div>
              <label for="" class="myla">居住地邮编：</label>
              <el-input v-model="form.fgHomePostalcode"></el-input>
            </div>
            <el-form-item label-width="106px" prop="fgLinkmanName">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                联系人：
              </label>
              <el-input v-model="form.fgLinkmanName"></el-input>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <el-form-item label-width="106px" prop="fgLinkmanRelation">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                关系：
              </label>
              <el-input v-model="form.fgLinkmanRelation"></el-input>
            </el-form-item>
            <div>
              <label for="" class="myla">联系人地址：</label>
              <el-input v-model="form.fgLinkmanAddress"></el-input>
            </div>
            <el-form-item label-width="106px" prop="fgLinkmanPhonenum">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                联系人电话：
              </label>
              <el-input v-model="form.fgLinkmanPhonenum"></el-input>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <el-form-item label-width="106px" prop="fgDepartment">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                入院科别：
              </label>
              <el-input v-model="form.fgDepartment"></el-input>
            </el-form-item>
            <el-form-item label-width="106px" prop="fgRoom">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                入院病室：
              </label>
              <el-input v-model="form.fgRoom"></el-input>
            </el-form-item>
            <el-form-item label-width="106px" prop="fgInTime">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                入院日期时间：
              </label>
              <!-- <el-input v-model="form.fgInTime"></el-input> -->
              <el-date-picker v-model="form.fgInTime" type="date" placeholder="选择日期时间" style="width: 200px"></el-date-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <el-form-item label-width="106px" prop="fgInStatus">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                入院时情况：
              </label>
              <el-radio-group v-model="form.fgInStatus" class="mySex">
                <el-radio label="1">危</el-radio>
                <el-radio label="2">急</el-radio>
                <el-radio label="3">一般</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label-width="106px" prop="fgPayway">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                交费方式：
              </label>
              <el-radio-group v-model="form.fgPayway" class="mySex">
                <el-radio label="1">统筹</el-radio>
                <el-radio label="2">公费</el-radio>
                <el-radio label="3">劳保</el-radio>
                <el-radio label="4">医疗保险</el-radio>
                <el-radio label="5">自费及其他</el-radio>
              </el-radio-group>
            </el-form-item>
            <div>
              <label for="" class="myla">转科情况：</label>
              <el-input v-model="form.fgChangedepartment"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">出院科别：</label>
              <el-input v-model="form.fgOutDepartment"></el-input>
            </div>
            <div>
              <label for="" class="myla">出院病室：</label>
              <el-input v-model="form.fgOutRoom"></el-input>
            </div>
            <div>
              <label for="" class="myla">出院日期：</label>
              <!-- <el-input v-model="form.fgOutDate"></el-input> -->
              <el-date-picker v-model="form.fgOutDate" type="date" placeholder="选择日期时间" style="width: 200px"></el-date-picker>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">门诊诊断：</label>
              <el-input v-model="form.fgOutDiagnose"></el-input>
            </div>
            <div>
              <label for="" class="myla">门诊诊断编码：</label>
              <el-input v-model="form.fgOutDiagnoseCode"></el-input>
            </div>
            <div>
              <label for="" class="myla">确诊日期：</label>
              <!-- <el-input v-model="form.fgDiagnoseDate"></el-input> -->
              <el-date-picker v-model="form.fgDiagnoseDate" type="date" placeholder="选择日期时间" style="width: 200px"></el-date-picker>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <span>主要诊断：</span>
          <el-input type="textarea" v-model="form.fgMainDiagnose"></el-input>
        </el-form-item>
        <el-form-item>
          <span>其他诊断：</span>
          <el-input type="textarea" v-model="form.fgSubordinationDiagnose"></el-input>
        </el-form-item>
        <el-form-item>
          <span>并发症：</span>
          <el-input type="textarea" v-model="form.fgIntercurrentDisease"></el-input>
        </el-form-item>
        <el-form-item>
          <span>损伤和中毒的外部原因：</span>
          <el-input type="textarea" v-model="form.fgOuterReasonMarAndToxicosis"></el-input>
        </el-form-item>
        <el-form-item>
          <span>病理诊断：</span>
          <el-input type="textarea" v-model="form.fgPathologicDiagnose"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">过敏药物：</label>
              <el-input v-model="form.fgAllergicMedicament"></el-input>
            </div>
            <div>
              <label for="" class="myla">血型：</label>
              <el-input v-model="form.fgBloodType"></el-input>
            </div>
            <div>
              <label for="" class="myla">病案质量：</label>
              <el-input v-model="form.fgDiseaseCaseQuality"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">费用总计：</label>
              <el-input v-model="form.fgTotalCharge"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">统筹号：</label>
              <el-input v-model="form.fgWholeNum"></el-input>
            </div>
            <div>
              <label for="" class="myla">个人分担：</label>
              <el-input v-model="form.fgIndividualShares"></el-input>
            </div>
            <el-form-item label-width="106px" prop="fgLeaveHospital">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                出院否：
              </label>
              <el-radio-group v-model="form.fgLeaveHospital" class="mySex">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <el-form-item label-width="106px" prop="fgShowDiseasecase">
              <label for="" class="myla">
                <span class="myLabe">*</span>
                示教病例：
              </label>
              <el-radio-group v-model="form.fgShowDiseasecase" class="mySex">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <div>
              <label for="" class="myla">主任医师签名：</label>
              <el-input v-model="form.fgSignatureDirectorDoctor"></el-input>
            </div>
            <div>
              <label for="" class="myla">主治医师签名：</label>
              <el-input v-model="form.fgSignatureChargeDoctor"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">住院医师签名：</label>
              <el-input v-model="form.fgSignatureHouseDoctor"></el-input>
            </div>
            <div>
              <label for="" class="myla">实习医师签名：</label>
              <el-input v-model="form.fgSignatureIntern"></el-input>
            </div>
            <div>
              <label for="" class="myla">编码员签名：</label>
              <el-input v-model="form.fgSignatureCoder"></el-input>
            </div>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="text" @click="updataMyBa">确定修改</el-button>
  </div>
</template>
<script>
import tishi from '../../../mixins/tishi';
import { mapActions } from 'vuex';
export default {
  mixins: [tishi],
  data() {
    return {
      form: [],
      rules: {
        fgCheckoutWay: { required: true, message: '请选择付费方式', trigger: 'change' },
        personNo: { required: true, message: '请输入医疗卡号', trigger: 'blur' },
        fgTimes: { required: true, message: '请输入入院次数', trigger: 'blur' },
        fgNum: { required: true, message: '请输入病案号', trigger: 'blur' },
        fgName: { required: true, message: '请输入姓名', trigger: 'blur' },
        fgSex: { required: true, message: '请选择性别', trigger: 'change' },
        fgBirthday: { required: true, message: '请选择出生日期', trigger: 'change' },
        fgNationality: { required: true, message: '请输入国籍', trigger: 'blur' },
        fgBirthplace: { required: true, message: '请输入籍贯', trigger: 'blur' },
        fgOccupation: { required: true, message: '请输入职业', trigger: 'blur' },
        fgIdNum: { required: true, message: '请输入身份证号码', trigger: 'blur' },
        fgMarriage: { required: true, message: '请选择是否已婚', trigger: 'change' },
        fgUnit: { required: true, message: '请输入工作地址', trigger: 'blur' },
        fgAddress: { required: true, message: '请输入户口地址', trigger: 'blur' },
        fgLinkmanName: { required: true, message: '请输入联系人', trigger: 'blur' },
        fgLinkmanRelation: { required: true, message: '请输入联系人关系', trigger: 'blur' },
        fgLinkmanPhonenum: { required: true, message: '请输入联系人电话', trigger: 'blur' },
        fgDepartment: { required: true, message: '请输入入院科别', trigger: 'blur' },
        fgRoom: { required: true, message: '请输入入院病室', trigger: 'blur' },
        fgInTime: { required: true, message: '请选择入院时间', trigger: 'change' },
        fgInStatus: { required: true, message: '请选择入院情况', trigger: 'change' },
        fgPayway: { required: true, message: '请选择交费方式', trigger: 'change' },
        fgLeaveHospital: { required: true, message: '请选择是否出院', trigger: 'change' },
        fgShowDiseasecase: { required: true, message: '请选择是否为示教病例', trigger: 'change' },
      },
    };
  },
  created() {
    this.form = { ...this.$store.state.MedicalRecords.bingAnXqData };
  },
  methods: {
    ...mapActions(['tongyong']),
    goBack() {
      this.$store.state.MedicalRecords.nowPage = 1;
      this.$router.push({ path: 'bingan' });
    },
    async updataMyBa() {
      this.form.fgDiagnoseDate = this.changetime(this.form.fgDiagnoseDate);
      this.form.fgOutDate = this.changetime(this.form.fgOutDate);
      this.form.fgInTime = this.changetime(this.form.fgInTime);
      this.form.fgBirthday = this.changetime(this.form.fgBirthday);
      await this.$refs['form'].validate(valid => {
        if (valid) {
          //通过验证执行
          this.deleteDataTy(
            {
              name: 'UPDATA_MYBA',
              data: this.form,
            },
            '修改'
          );
        } else {
          //验证失败执行
          this.$message({
            type: 'error',
            message: '请补全信息',
          });
          return false;
        }
      });
    },
    padDate(value) {
      return value < 10 ? '0' + value : value;
    },
    changetime(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = this.padDate(date.getMonth() + 1);
      let d = this.padDate(date.getDate());
      return `${year}-${month}-${d}`;
    },
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.myLabe {
  color: #f56c6c;
}
// /deep/.el-form-item__label {
//   font-size: 12px !important;
// }
// /deep/.el-radio__label {
//   font-size: 12px !important;
// }
.myla {
  display: inline-block;
  width: 108px;
  text-align: right;
}
.mylang {
  display: inline-block;
  width: 160px;
  text-align: right;
}
.myjuzhong {
  display: flex;
  justify-content: space-between;
}
.twoJz {
  display: flex;
}
.el-radio {
  margin-right: 10px;
}
.mytitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
}
/deep/.el-input {
  width: 200px;
  .el-input__inner {
    height: 25px;
  }
}
/deep/.el-form-item__content {
  width: 100%;
  margin-left: 0 !important;
}
.el-form-item {
  margin-bottom: 0;
}
.myTable {
  margin-top: 10px;
  padding: 10px 60px;
  border: 1px solid rgba(129, 129, 129, 0.4);
}
.mySex {
  width: 200px;
}
.goback {
  float: right;
  margin-right: 5%;
}
.myTop {
  overflow: hidden;
}
/deep/.el-form-item__error {
  position: absolute;
  top: 74%;
  left: 110px;
}
</style>
